<script setup lang="ts">
import {ref} from 'vue'
import {funThrottleByLimit} from 'st-common-core'
import {StnDialog, StnResponsiveColsForm, useTipStore, TipMessageTypeConst} from 'st-ui-vue3-navie'
import {ResType, ResObjPropNameConst} from "st-common-req"
import {FormRules} from 'naive-ui'
import {FormDialogSizeConst} from '@config'
import {useLoadingStore} from '@loading'

/**
 * 组件参数
 */
const {
  title = '',
  submitHandler = () => Promise.resolve({[ResObjPropNameConst.STATUS]: true, [ResObjPropNameConst.MESSAGE]: '表单提交成功'}),
  rules = {},
  labelWidth = 100,
  cols = 2,
} = defineProps<{
  // 标题
  title?: string;
  // 表单提交处理函数
  submitHandler?: () => Promise<ResType>;
  // 表单规则
  rules?: FormRules;
  // 表单标签宽度
  labelWidth?: number;
  // 表单项的列数
  cols?: number;
}>()

/**
 * 双向数据绑定
 */
// 对话框是否显示
const show = defineModel<boolean>('show', {default: false})
// 表单
const form = defineModel<Record<string, any>>('form', {default: {}})

/**
 * 对话框关闭处理
 */
// 是否阻止对话框关闭
const isPreventDialogClose = ref<boolean>(false)
// 对话框关闭处理函数
const closeDialogHandler = () => {
  if (isPreventDialogClose.value) return
  show.value = false
}

/**
 * 表单提交处理
 */
// 是否正在提交表单
const isFormSubmitting = ref<boolean>(false)
// 表单提交处理函数
const submitFormHandler = funThrottleByLimit({
  fun: async () => {
    // 标记正在提交表单
    isFormSubmitting.value = true
    setTimeout(() => {
      // 如果表单提交完成
      if (!isFormSubmitting.value) return
      // 如果表单仍然在提交，开启加载动画
      useLoadingStore().loading()
    }, 500)
    // 阻止对话框关闭
    isPreventDialogClose.value = true
    // 调用表单提交处理函数
    return await submitHandler()
      .then(() => {
        // 关闭对话框
        show.value = false
      })
      .catch((res: ResType) => {
        useTipStore().message(res[ResObjPropNameConst.MESSAGE], TipMessageTypeConst.ERROR)
      })
      .finally(() => {
        // 取消阻止对话框关闭
        isPreventDialogClose.value = false
        // 标记表单提交完成
        isFormSubmitting.value = false
        // 关闭加载动画
        useLoadingStore().loaded()
      })
  }
})
</script>

<template>
  <div class="responsive-cols-form">
    <StnDialog
      :show="show"
      @update:show="closeDialogHandler"
      display-directive="show"
      :title="title"
      :positive-button-props="{
        type: 'primary',
        loading: isFormSubmitting,
        disabled: isFormSubmitting,
      }"
      @close="() => isPreventDialogClose = false"
      @negative-click="() => isPreventDialogClose = false"
      @positive-click="submitFormHandler"
    >
      <template #default>
        <StnResponsiveColsForm
          class="pt-4"
          :style="{
            width: FormDialogSizeConst[cols].WIDTH,
            maxWidth: FormDialogSizeConst[cols].MAX_WIDTH,
          }"
          :max-height="FormDialogSizeConst[cols].MAX_HEIGHT"
          :model="form"
          :rules="rules"
          :label-width="labelWidth"
        >
          <slot></slot>
        </StnResponsiveColsForm>
      </template>
    </StnDialog>

  </div>
</template>

<style scoped>

</style>
